.homepage {
  text-align: center;
  padding-top: 7.34375rem;
  color: #e7c598;
}

.homepage .logo {
  height: 1.25rem;
  margin-bottom: 1.25rem;
}

.homepage h1 {
  font-size: 2.8125rem;
  font-weight: bold;
}

.homepage .text-btn {
  margin-top: 0.9375rem;
}

.homepage .diy {
  margin-top: 3.125rem;
}

.diy-desk-box, .get-wine-box {
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
}

.diy-desk-box > div, .get-wine-box > div {
  height: 100%;
  -webkit-transition: 1s;
  transition: 1s;
}

.rule {
  color: #e7c598;
  padding: 0.625rem 1.5625rem;
  overflow: hidden;
}

.rule .rule-text {
  height: 27.1875rem;
  overflow-x: hidden;
}

.rule .rule-text .title {
  font-size: 0.75rem;
  font-weight: bold;
  margin: 0.625rem 0 0.46875rem;
}

.rule .rule-text p {
  font-size: 0.5625rem;
  line-height: 0.875rem;
  text-align: justify;
}

.rule .text-btn {
  margin-top: 0.625rem;
}

.diy-box {
  padding-top: 0.625rem;
}

.get-wine {
  color: #e7c598;
  height: 100%;
  padding: 1.09375rem 1.40625rem;
  position: relative;
  -webkit-transition: 1s;
  transition: 1s;
}

.get-wine #cuted {
  position: absolute;
  top: 1.09375rem;
  left: 1.40625rem;
  z-index: 1;
}

.get-wine .map {
  margin-top: 1.875rem;
  height: 12.5rem;
  text-align: center;
  position: relative;
}

.get-wine .map > div.pro-animate {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.get-wine .map > div.pro-animate > div {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.get-wine .map > div {
  width: 16.875rem;
  height: 100%;
  position: relative;
  margin: 0 auto;
  -webkit-transform: scale(0);
  transform: scale(0);
}

.get-wine .map > div > div {
  width: 2.0625rem;
  height: 2.8125rem;
  position: absolute;
  background: url("../img/weizhi.png") no-repeat center/100% 100%;
  color: #bf0c21;
  padding-top: 0.46875rem;
  font-size: 0.4375rem;
  margin: -2.8125rem 0 0 -1.03125rem;
  -webkit-transform: translateY(-20.8125rem);
  transform: translateY(-20.8125rem);
}

.get-wine .map > div > div em {
  font-size: 0.625rem;
  line-height: 0.5625rem;
}

.get-wine .map > div.hainan {
  position: absolute;
  top: 0;
}

.get-wine .map > div.hainan img {
  margin-top: -2.03125rem;
}

.get-wine .map > div .shaoguan {
  top: 1.40625rem;
  left: 9.375rem;
}

.get-wine .map > div .maoming {
  top: 8.125rem;
  left: 2.8125rem;
}

.get-wine .map > div .yangjiang {
  top: 8.125rem;
  left: 5rem;
}

.get-wine .map > div .haikou {
  top: 0.25rem;
  left: 13.375rem;
}

.get-wine .map > div .sanya {
  top: 9.21875rem;
  left: 5.78125rem;
}

.get-wine .stay-get {
  text-align: right;
  position: absolute;
  top: 11.5625rem;
  right: 0.78125rem;
}

.get-wine .stay-get .text {
  font-size: 1rem;
}

.get-wine .stay-get .text em {
  font-size: 1.71875rem;
}

.get-wine .stay-get em, .get-wine .stay-get .headline {
  font-size: 1.3125rem;
  font-weight: bold;
}

.get-wine .title {
  font-size: 0.75rem;
  font-weight: bold;
  margin: 0.625rem 0 0.46875rem;
}

.get-wine > p {
  font-size: 0.5625rem;
  line-height: 0.875rem;
  text-align: justify;
}

.get-wine #find-lately {
  margin-top: 0.78125rem;
}

.lately-map {
  height: 100%;
  color: #e7c598;
  position: relative;
}

.lately-map .content {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

.lately-map .content #map {
  width: 15rem;
  height: 14.0625rem;
  background-color: #e7c598;
  margin: 0 auto 1.25rem;
  color: #000;
  position: relative;
}

.lately-map .content #map .no-wang {
  color: #bf0c21;
  padding: 0 0.625rem;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

.lately-map .content .info-title {
  color: white;
  font-size: 0.75rem;
  text-indent: 0.15625rem;
  background-color: blue;
  height: 1.25rem;
  line-height: 1.25rem;
}

.lately-map .content .info-content p {
  width: 10.9375rem;
  padding: 0.15625rem;
  text-align: left;
  color: #666;
  line-height: 0.9375rem;
  font-size: 0.75rem;
  word-break: break-all;
}

.lately-map .content p {
  width: 15rem;
  font-size: 0.9375rem;
  text-align: center;
}

.exchange-box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 100%;
  left: 0;
}

@-webkit-keyframes pro-an {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pro-an {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
